<template>
  <div class="logistics-box">
    <div v-if="!hasData" class="banner" :style="{'height':bannerHeight+'px'}">
    </div>
    <div class="detailed" style="z-index: 0;" v-if="!hasData" >
      <div class="noContent">
        <p>您还没有工作,快去找工作吧~</p>
        <button class="button" @click="goToFindJob()">去找工作</button>
      </div>
   </div>
    <div class="logistics-content" v-if='hasData'>
      <ul class="logistics-ul clearfix">
        <li class="logistics-li" v-for='(item, index) in logisticsList' :index='index' v-if='item.goodsType == "1"'>
          <div class="logistics-li-box">
            <img :src="item.goodsImg" class="logistics-li-img">
            <div class="logistics-li-info">
              <div class="logistics-li-title">{{item.goodsName}}</div>
              <div class="logistics-li-detail">{{item.goodsDesc}}</div>
              <div class="logistics-li-price">
                <span>￥</span>
                {{item.goodsPrice}}
                <span class="logistics-li-add" @click='addCommodity(item, $event)'></span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div style="text-align: center;padding: 10px;" v-show='shoLoading'>正在加载……</div>
    </div>
    <div class="showShoppingCart-box" @click='showShoppingCart' @touchmove.prevent v-show='hasData && showShoppingCartFlag'>
      <div class="showShoppingCart-content">
        <div class="showShoppingCart-title">
          已选商品
        </div>
        <ul class="showShoppingCart-ul">
          <li class="showShoppingCart-li" v-for='(item, index) in $store.state.order.selectedLoisticsList' :key='index'>
            <span class="showShoppingCart-span-title">{{item.goodsName}}</span>
            <span class="showShoppingCart-span-price">￥{{item.goodsPrice}}</span>
            <span class="showShoppingCart-span-num">
              <span class="showShoppingCart-minus" @click='minusCommity(item, $event)'></span>
              <span class="showShoppingCart-num">{{item.goodsCount}}</span>
              <span class="showShoppingCart-add" @click='addCommodity(item, $event)'></span>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="logistics-bottom clearfix" v-if='hasData'>
      <div class="logistics-bottom-price">
        <span class="showShoppingCart-pic" @click="showShoppingCart"></span>
        <span class="price-total"><span>￥</span>{{totalPrice}}</span>
      </div>
      <div class="logistics-bottom-btn">
        <button class="logistics-button" @click='commitAction'>提交订单</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations, mapActions} from 'vuex';
  import {getGoodsList, getUserStatus} from '@/controller'
  export default {
    name: 'myLogistics',
    data() {
      return {
        logisticsList: [],
        showShoppingCartFlag: false,
        shoLoading: false,
        startY: 0,
        endY: 0,
        hasData: false,
        userInfo: [],
        bannerHeight: window.innerWidth / (25 / 9),
      }
    },
    created() {
    },

    mounted() {
      this.init();
      this.minusOrder('all')
    },

    components: {
    },

    computed: {
      ...mapGetters([
        'totalPrice',
        ])
    },

    methods: {
      async init() {
        let res1 = await getUserStatus();
        console.log('res1', res1);
        this.userInfo = res1.data.ing;
        if(!this.userInfo || this.userInfo.userStatus != 3) {
          this.hasData = false;
          return
        }
        this.hasData = true;
        let res = await getGoodsList();
        if (res.code === 0) {
          this.logisticsList = res.data;
          this.logisticsList.forEach((item) => {
            this.$set(item, 'goodsCount', 0);
          });
        } else {
          this.$toast.center('鉴权失败');
        }
      },

      showShoppingCart() {
        this.showShoppingCartFlag = !this.showShoppingCartFlag;
      },

      commitAction() {
        if(this.$store.state.order.selectedLoisticsList.length == 0) {
          this.$toast.center("请先选择商品");
          return;
        }
        this.$router.push({
          path:`/commitOrder`,
          query: this.userInfo
        })
      },

      addCommodity(item, e) {
        e.stopPropagation();
        let index = this.$store.state.order.selectedLoisticsList.findIndex((d) => d.id == item.id);
        if(index == 0 || index > 0) {
          this.addOrder(item);
        }  else {
          this.pushOrder(item);
        }
      },

      goToFindJob(){
        this.$router.push({
          path:`/`
        })
      },

      minusCommity(item, e) {
        e.stopPropagation();
        this.minusOrder(item);
      },
      /*touchStart (e) {
        this.startY = e.targetTouches[0].pageY
      },

      touchend (e) {
        if(this.shoLoading == true) {
          return;
        }
        if (this.getScrollTop() + this.getClientHeight() >= this.getScrollHeight() - 80) {
          this.shoLoading = true;
          setTimeout(() => {
            var id = this.logisticsList[this.logisticsList.length - 1].id
            this.logisticsList.push({
              id: id * 1 + 1,
              title: '入职套装',
              detail: '床上三件套，洗漱套装，毛巾两条，晾衣架10个等',
              price: '299.00',
              showPic: '',
              num: 0,
            });
            this.logisticsList.push({
              id: id * 1 + 2,
              title: '入职套装',
              detail: '床上三件套，洗漱套装，毛巾两条，晾衣架10个等',
              price: '299.00',
              showPic: '',
              num: 0,
            });
            this.shoLoading = false;
          }, 500)
        }
      },

      //下拉加载
      getScrollTop() {
        // return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        return document.getElementsByClassName('logistics-box')[0].scrollTop;
      }, 

      getClientHeight() { 
        var clientHeight = 0; 
        if (document.body.clientHeight && document.documentElement.clientHeight) { 
          clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
        } else { 
          clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        return clientHeight; 
      },

      // 获取文档完整的高度 
      getScrollHeight() { 
        return document.querySelector('.logistics-ul').clientHeight; 
      },*/
      ...mapMutations({
        pushOrder: 'PUSH_SELETED_ORDER',
        addOrder: 'ADD_SELETED_ORDER',
        minusOrder: 'SPLICE_SELETED_ORDER',
      }),
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .banner{
    background: url("/static/wechat/images/centerBg@2x.png");
    background-size: 100%;
    background-position-y: 70%;
  }
</style>
